<template>
  <button class="y-button" :class="[size, type]" :style="{ backgroundColor: color != '' ? color : '' }">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
defineOptions({
  name: 'YButton'
})
interface Props {
  type?: string;
  size?: string;
  color?: string;
}
// defineProps没有提供默认值的方法可以使用withDefaults
const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'large',
  color: ''
})
</script>

<style scoped lang="scss">
.y-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}

.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}

.small {
  width: 100px;
  height: 32px;
  font-size: 14px;
}

.mini {
  width: 60px;
  height: 32px;
  font-size: 14px;
}

.default {
  border-color: $defaultColor;
  color: #606266;
  background-color: #fbfbfb;
}

.primary {
  border-color: $primaryColor;
  background: $primaryColor;
  color: #fff;
}

.success {
  border-color: $successColor;
  color: #fff;
  background: $successColor;
}

.danger {
  background-color: $dangerColor;
  color: #fff;
  border-color: $dangerColor;
}

.warning {
  background-color: $warningColor;
  color: #fff;
  border-color: $warningColor;
}
</style>
